<template>
<div>
  <div>
    <div style="display: flex;justify-content: space-between;margin-top: 10px">
      <div>
        <el-input size="mini" style="width: 300px;margin-right: 10px"
                  prefix-icon="el-icon-search"
                  v-model="gname" :disabled="showSortSearchVisible"
                  @keydown.enter.native="initGoodos"
                  clearable
                  @clear="initGoodos"
                  placeholder="请输入商品名称进行搜索...">
        </el-input>
        <el-button :disabled="showSortSearchVisible" size="mini"
                   type="primary" icon="el-icon-search" @click="initGoodos">搜索
        </el-button>
        <el-button type="primary" size="mini" @click="showSortSearchVisible= !showSortSearchVisible">
          <i :class="showSortSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true"></i>
          商品分类搜索</el-button>
      </div>
      <div>
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="showAddGoodView">发布商品</el-button>
      </div>
    </div>
  </div>
  <div v-show="showSortSearchVisible" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;
  margin: 10px 0px">
    <el-row>
      <el-col :span="4">
          一级分类：
          <el-select size="mini" style="width: 120px;" v-model="searchValue.gsort1" placeholder="一级分类">
            <el-option
                v-for="item in sort1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
      </el-col>
      <el-col :span="4">
          二级分类：
          <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                  v-model="searchValue.gsort2" placeholder="二级分类"></el-input>
      </el-col>
      <el-col :span="16">
          <el-button size="mini" @click="initGoodos">取消</el-button>
          <el-button @click="initGoodos('sortSearch')" size="mini" type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
    </el-row>
  </div>
  <div style="margin-top: 10px">
    <el-table
        :data="goodos"
        stripe
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="商品编号"
          fixed
          align="center"
          width="80">
      </el-table-column>
      <el-table-column
          prop="gname"
          label="商品名称"
          align="left"
          width="100">
      </el-table-column>
      <el-table-column
          label="商品价格"
          align="left"
          width="100">
        <template scope="scope">
          <el-tag>{{scope.row.gprice}}元</el-tag>
        </template>
      </el-table-column>
        <el-table-column
            prop="gdesc"
            label="商品描述"
            align="left"
            width="240">
        </el-table-column>
        <el-table-column
            prop="gsort1"
            label="一级分类"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="gsort2"
            label="二级分类"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="gcount"
            label="商品库存"
            align="left"
            width="90">
        </el-table-column>
        <el-table-column
            label="冻结状态"
            align="left"
            width="90">
            <template scope="scope">
              <el-tag v-if="scope.row.gisFreeze==1">已冻结</el-tag>
              <el-tag type="success" v-else>未冻结</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            label="出售状态"
            align="left"
            width="90">
            <template scope="scope">
              <el-tag type="danger" v-if="scope.row.gisSell==1">已下架</el-tag>
              <el-tag v-else>在售中</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="160">
            <template slot-scope="scope">
                <el-button @click="ShowEditGoodView(scope.row)" style="padding: 3px" size="mini">编辑</el-button>
                <el-button @click="freezeGood(scope.row)" style="padding: 3px" size="mini" type="primary">冻结</el-button>
                <el-button @click="removeGood(scope.row)" style="padding: 3px" size="mini" type="danger">下架</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 10px;display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout='sizes, prev, pager, next, jumper, ->, total'
            :page-size="size"
            :page-sizes="[5,10,20,30,40]"
            :total="total">
        </el-pagination>
    </div>
  </div>
  <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="70%">
      <div>
          <el-form ref="goodForm" :model="good" :rules="rules">
              <el-row>
                  <el-col :span="5">
                      <el-form-item label="商品名称:" prop="gname">
                          <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                                    v-model="good.gname" placeholder="商品名称"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="5">
                      <el-form-item label="商品价格:" prop="gprice">
                          <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                                    v-model="good.gprice" placeholder="商品价格"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="5">
                      <el-form-item label="商品库存:" prop="gcount">
                          <el-input size="mini" style="width: 100px" prefix-icon="el-icon-edit"
                                    v-model="good.gcount" placeholder="商品库存"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="9">
                      <el-form-item label="商品描述:" prop="gdesc">
                          <el-input size="mini" style="width: 240px" prefix-icon="el-icon-edit"
                                    v-model="good.gdesc" placeholder="请输入商品描述"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="5">
                      <el-form-item label="一级分类:" prop="gsort1">
                        <el-select size="mini" style="width: 120px;" v-model="good.gsort1" placeholder="一级分类">
                          <el-option
                              v-for="item in sort1"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="5">
                      <el-form-item label="二级分类:" prop="gsort2">
                              <el-form-item prop="gsort2">
                                  <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                                            v-model="good.gsort2" placeholder="二级分类"></el-input>
                              </el-form-item>
                      </el-form-item>
                  </el-col>
                  <el-col :span="14">
                      <el-form-item label="图片地址:" prop="gimgUrl">
                          <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit"
                                    v-model="good.gimgUrl" placeholder="请输入图片地址"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>

      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doAddGood">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "GoodOnsell",
  data(){
      return {
          searchValue:{
             gsort1:'',
             gsort2:''
          },
          showSortSearchVisible:false,
          sort1: [{
            value: '女装男装',
            label: '女装男装'
          }, {
            value: '鞋类箱包',
            label: '鞋类箱包'
          }, {
            value: '护肤彩妆',
            label: '护肤彩妆'
          }, {
            value: '汇吃美食',
            label: '汇吃美食'
          }, {
            value: '手机数码',
            label: '手机数码'
          }],
          title:'',
          dialogVisible:false,
          loading:false,
          goodos:[],
          total:0,
          currentPage:1,
          size:5,
          gname:'',
          good: {
              id: null,
              gname: '',
              gprice: '',
              gcount: '',
              gdesc: '',
              gsort1: '',
              gsort2: '',
              gimgUrl: '',
          },
          rules:{
            gname: [{required: true, message: "请输入商品名称", trigger: 'blur'}],
            gprice: [{required: true, message: "请输入商品价格", trigger: 'blur'}],
            gcount: [{required: true, message: "请输入商品库存", trigger: 'blur'}],
            gdesc: [{required: true, message: "请输入商品描述", trigger: 'blur'}],
            gsort2: [{required: true, message: "请输入二级分类", trigger: 'blur'}],
            gimgUrl: [{required: true, message: "请输入图片地址", trigger: 'blur'}],
          }
      }
  },
  mounted() {
      this.initGoodos();
  },
  methods: {
      freezeGood(data){
          this.$confirm('此操作将冻结商品【'+data.gname+'】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
          }).then(() => {
              this.putRequest('/good/onsell/freezeGood/'+data.id).then(resp=>{
                  if (resp){
                    this.initGoodos();
                  }
              })
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消该操作'
              });
          });
      },
      ShowEditGoodView(data){
          this.title = '编辑商品信息';
          this.good = data;
          this.dialogVisible = true;

      },
      removeGood(data){
          this.$confirm('此操作将永久下架'+data.gname+', 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.putRequest('/good/onsell/removeGood/'+data.id).then(resp=>{
                  if (resp){
                      this.initGoodos();
                  }
              })
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消该操作'
            });
          });
      },
      doAddGood(){
          if (this.good.id){
              this.$refs['goodForm'].validate(valid =>{
                  if (valid){
                      this.putRequest('/good/onsell/',this.good).then(resp=> {
                      this.dialogVisible = false;
                      this.initGoodos();
                    })
                  }
              })

          }else{
              this.$refs['goodForm'].validate(valid =>{
                  if (valid){
                        this.postRequest('/good/onsell/',this.good).then(resp=> {
                        this.dialogVisible = false;
                        this.initGoodos();
                      })
                  }
              })
          }
      },
      sizeChange(size){
          this.size = size;
          this.initGoodos();
      },
      currentChange(currentPage){
          this.currentPage = currentPage;
          this.initGoodos();
      },
      showAddGoodView(){
          this.title = '上架商品';
          this.good= {
                id: null,
                gname: '',
                gprice: '',
                gcount: '',
                gdesc: '',
                gsort1: '',
                gsort2: '',
                gimgUrl: '',
          };
          this.dialogVisible = true;
      },
      initGoodos(type){
          this.loading = true;
          let url = '/good/onsell/?currentPage='+this.currentPage+'&size='+this.size;
          if (type && type == 'sortSearch'){
              if (this.searchValue.gsort1){
                  url += '&gSort1='+this.searchValue.gsort1;
              }
              if (this.searchValue.gsort1){
                  url += '&gSort2='+this.searchValue.gsort2;
              }
          }else {
              url += '&gName='+this.gname;
          }
          console.log(url);
          this.getRequest(url).then(resp=>{
            this.loading = false;
              if (resp){
                  this.goodos = resp.data;
                  this.total = resp.total;
              }
          })
      },
  }
}
</script>

<style scoped>

</style>